<style lang="scss" scoped>

@import '../../style/mixin';
#foot_guide {
    background-color: #fff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    @include wh(100%, 1.95rem);
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0, 0, 0, .1);
}

.guide_item {
    flex: 1;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    .icon_style {
        @include wh(.8rem, .8rem);
        margin-top: .3rem;
        fill: #ccc;
    }
    span {
        @include sc(.45rem, #666);
        &.icon-color{
          display: block;
        }
        &.icon-color.sel-icon-color{
          color:#e98f36;
        }
    }
}

</style>

<template>

<section id='foot_guide'>
    <section @click="gotoAddress({path: '/home'})" class="guide_item">
        <span v-if="routePath=='/home'">
          <img class="icon_style" src="../../assets/images/list2.png" alt="">
          <span class="icon-color sel-icon-color">餐桌</span>
        </span>
        <span v-else>
          <img class="icon_style" src="../../assets/images/list.png" alt="">
          <span class="icon-color">餐桌</span>
        </span>
    </section>
    <section @click="gotoAddress('/about')" class="guide_item">
      <span v-if="routePath=='/about'">
        <img class="icon_style" src="../../assets/images/about2.png" alt="">
        <span class="icon-color sel-icon-color">我的</span>
      </span>
      <span v-else>
        <img class="icon_style" src="../../assets/images/about.png" alt="">
        <span class="icon-color">我的</span>
      </span>
    </section>
</section>

</template>

<script>

import {
    mapState
}
from 'vuex'
export default {
    data() {
            return {
                routePath: null,
                listIcon: '../../assets/images/list.png',
                SelListIcon: '../../assets/images/list2.png',
            }
        },
        created() {
            this.routePath = this.$route.path
        },
        mounted() {

        },
        computed: {

        },
        methods: {
            gotoAddress(path) {
                this.$router.push(path)
            }
        },

}

</script>
